<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Dev Server</title>
    <script src="/assets/app.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Hello, world!</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
            extra attention to featured content or information.</p>
          <hr class="m-y-md">
          <p>It uses utility classes for typography and spacing to space content out within the
            larger container.</p>
          <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal"
               data-target="#modal">
              Learn more
            </a>
          </p>
        </div>
      </div>

      <div class="container">
        <h2>Glyphicons (not available for Bootstrap 4!)</h2>
        <div class="row col-items">
          <div class="col-md-4 col-item">
            <span class="glyphicon glyphicon-headphones"></span>
            <span class="text">It.</span>
          </div>
          <div class="col-md-4 col-item">
            <span class="glyphicon glyphicon-glass"></span>
            <span class="text">Just.</span>
          </div>
          <div class="col-md-4 col-item">
            <span class="glyphicon glyphicon-thumbs-up"></span>
            <span class="text">Works.</span>
          </div>
        </div>
      </div>

      <div class="container">
        <h2>Font Awesome using the font-awesome-loader</h2>
        <div class="row col-items">
          <div class="col-md-4 col-item">
            <span class="fa fa-headphones"></span>
            <span class="text">It.</span>
          </div>
          <div class="col-md-4 col-item">
            <span class="fa fa-glass"></span>
            <span class="text">Just.</span>
          </div>
          <div class="col-md-4 col-item">
            <span class="fa fa-thumbs-up"></span>
            <span class="text">Works.</span>
          </div>
        </div>
      </div>

      <div class="container">
        <h2>Bootstrap 4 card component</h2>
        <div class="card">
          <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
      </div>

      <div class="container">
        <h2>Bootstrap 4 card columns</h2>
        <div class="card-columns">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title that wraps to a new line</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural
                lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
          <div class="card card-block">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                ante.</p>
              <footer>
                <small class="text-muted">
                  Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">This card has supporting text below as a natural lead-in to
                additional content.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
          <div class="card card-block card-inverse card-primary text-xs-center">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
              <footer>
                <small>
                  Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card card-block text-xs-center">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to
              additional content.</p>
            <p class="card-text">
              <small class="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
          <div class="card card-block text-xs-right">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                ante.</p>
              <footer>
                <small class="text-muted">
                  Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural
              lead-in to additional content. This card has even longer content than the first to
              show that equal height action.</p>
            <p class="card-text">
              <small class="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
      </div>

      <div class="alert alert-info" role="alert">
        You can use <code>sass-resources-loader</code> with <code>bootstrap-loader</code>
      </div>

      <div id="modal" class="modal fade">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
              </button>
              <h4 class="modal-title">Learned more!</h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">
                Ok!
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </body>

</html>
